:root {
            --color-white: rgba(255, 255, 255, 1);
            --color-black: rgba(0, 0, 0, 1);
            --color-cream-50: rgba(252, 252, 249, 1);
            --color-cream-100: rgba(255, 255, 253, 1);
            --color-gray-200: rgba(245, 245, 245, 1);
            --color-gray-300: rgba(167, 169, 169, 1);
            --color-gray-400: rgba(119, 124, 124, 1);
            --color-slate-500: rgba(98, 108, 113, 1);
            --color-brown-600: rgba(94, 82, 64, 1);
            --color-charcoal-700: rgba(31, 33, 33, 1);
            --color-charcoal-800: rgba(38, 40, 40, 1);
            --color-slate-900: rgba(19, 52, 59, 1);
            --color-teal-300: rgba(50, 184, 198, 1);
            --color-teal-400: rgba(45, 166, 178, 1);
            --color-teal-500: rgba(33, 128, 141, 1);
            --color-teal-600: rgba(29, 116, 128, 1);
            --color-teal-700: rgba(26, 104, 115, 1);
            --color-red-400: rgba(255, 84, 89, 1);
            --color-red-500: rgba(192, 21, 47, 1);
            --color-orange-400: rgba(230, 129, 97, 1);
            --color-orange-500: rgba(168, 75, 47, 1);

            --color-background: var(--color-cream-50);
            --color-surface: var(--color-cream-100);
            --color-text: var(--color-slate-900);
            --color-text-secondary: var(--color-slate-500);
            --color-primary: var(--color-teal-500);
            --color-primary-hover: var(--color-teal-600);
            --color-border: rgba(94, 82, 64, 0.2);
            --color-border-light: rgba(94, 82, 64, 0.1);

            
            --font-family-mono: 'Courier New', monospace;
            --radius: 8px;
            --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            
            background: var(--color-background);
            color: var(--color-text);
            line-height: 1.6;
        }



        /* CONTAINER LAYOUT */
        .doccontainer {
            display: flex;
            height: calc(100vh - 200px);
            border-top: 1px solid var(--color-charcoal-800);
        }
        .doc-hero {
    text-align: center;
    margin-bottom: 20px;
}

.doc-hero h1 {
    font-size: 40px;
    font-weight: 700;
    color: #191919;
    line-height: 1.1;
    text-transform: uppercase;
}

        /* SIDEBAR */
        .sidebar {
            width: 300px;
            background: var(--color-surface);
            border-right: 1px solid var(--color-border-light);
            overflow-y: auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .search-box {
            position: relative;
        }

        .search-box input {
            width: 100%;
            padding: 10px 14px 10px 38px;
            border: 1px solid var(--color-border);
            border-radius: var(--radius);
            font-size: 14px;
            font-family: var(--font-family);
            background: var(--color-background);
        }

        .search-box input::placeholder {
            color: var(--color-text-secondary);
        }

        .search-box input:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px rgba(33, 128, 141, 0.1);
        }

        .search-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--color-text-secondary);
            font-size: 16px;
        }

        .toc {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
        }

        .toc ul {
            list-style: none;
        }

        .toc-level-1 {
            margin-bottom: 20px;
        }

        .toc-level-1>li>a {
            display: block;
            padding: 10px 12px;
            font-weight: 600;
            color: var(--color-text);
            text-decoration: none;
            border-radius: var(--radius);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .toc-level-1>li>a:hover {
            background: var(--color-gray-200);
            color: var(--color-primary);
        }

        .toc-level-1>li>a.active {
            background: rgba(33, 128, 141, 0.15);
            color: var(--color-primary);
            border-left: 3px solid var(--color-primary);
            padding-left: 9px;
        }

        .toc-level-2 {
            margin-left: 12px;
            margin-top: 8px;
            border-left: 1px solid var(--color-border-light);
            padding-left: 12px;
        }

        .toc-level-2 a {
            display: block;
            padding: 6px 0;
            font-size: 13px;
            color: var(--color-text-secondary);
            text-decoration: none;
            cursor: pointer;
            transition: color 0.2s ease;
        }

        .toc-level-2 a:hover,
        .toc-level-2 a.active {
            color: var(--color-primary);
        }

        /* MAIN CONTENT */
        .doc-section {
            padding-top: 80px;
            background: #aadf4f;
        }

        .content {
            flex: 1;
            display: flex;
            flex-direction: column;
            background: var(--color-background);
        }

        .doc-viewer {
            flex: 1;
            overflow-y: auto;
            padding: 40px;
        }

        .doc-content {
            max-width: 900px;
            margin: 0 auto;
        }

        .doc-content h2 {
            font-size: 28px;
            font-weight: 600;
            color: var(--color-text);
            margin-top: 40px;
            margin-bottom: 20px;
            border-bottom: 2px solid var(--color-border);
            padding-bottom: 12px;
        }

        .doc-content h2:first-child {
            margin-top: 0;
        }

        .doc-content h3 {
            font-size: 20px;
            font-weight: 600;
            color: var(--color-text);
            margin-top: 32px;
            margin-bottom: 16px;
        }

        .doc-content h4 {
            font-size: 16px;
            font-weight: 600;
            color: var(--color-primary);
            margin-top: 24px;
            margin-bottom: 12px;
        }

        .doc-content p {
            font-size: 15px;
            line-height: 1.8;
            margin-bottom: 16px;
            color: var(--color-text);
        }

        .doc-content code {
            
            padding: 2px 6px;
            border-radius: 4px;
            font-family: var(--font-family-mono);
            font-size: 13px;
            color: var(--color-gray-200);
        }

        .doc-content pre {
            background: var(--color-charcoal-800);
            color: var(--color-cream-50);
            padding: 16px;
            border-radius: var(--radius);
            overflow-x: auto;
            margin: 20px 0;
            font-family: var(--font-family-mono);
            font-size: 13px;
            line-height: 1.5;
        }

        .doc-content pre code {
            background: none;
            color: inherit;
            padding: 0;
        }

        .formula-box {
            background: var(--color-charcoal-800);
            border-left: 4px solid var(--color-primary);
            padding: 16px;
            border-radius: var(--radius);
            margin: 20px 0;
            font-family: var(--font-family-mono);
            font-size: 14px;
            color: var(--color-cream-50);
            overflow-x: auto;
            line-height: 1.5;
        }

        .media-container {
            margin: 24px 0;
            text-align: center;
        }

        .media-container img,
        .media-container video {
            max-width: 100%;
            height: auto;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }

        .media-caption {
            font-size: 13px;
            color: var(--color-text-secondary);
            margin-top: 8px;
            font-style: italic;
        }

        .note-box {
            background: rgba(33, 128, 141, 0.1);
            border-left: 4px solid var(--color-primary);
            padding: 16px;
            border-radius: var(--radius);
            margin: 20px 0;
        }

        .note-box strong {
            color: var(--color-primary);
        }

        .admin-panel {
            display: none;
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 350px;
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--radius);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
            z-index: 1000;
            padding: 20px;
            max-height: 80vh;
            overflow-y: auto;
        }

        .admin-panel.visible {
            display: block;
        }

        .admin-panel h3 {
            font-size: 16px;
            margin-bottom: 16px;
            color: var(--color-primary);
        }

        .admin-form {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .admin-form input,
        .admin-form textarea,
        .admin-form select {
            padding: 10px;
            border: 1px solid var(--color-border);
            border-radius: var(--radius);
            font-family: var(--font-family);
            font-size: 13px;
        }

        .admin-form textarea {
            resize: vertical;
            min-height: 100px;
            font-family: var(--font-family-mono);
        }

        .admin-form button {
            padding: 10px;
            background: var(--color-primary);
            color: white;
            border: none;
            border-radius: var(--radius);
            cursor: pointer;
            font-weight: 600;
            transition: background 0.2s ease;
        }

        .admin-form button:hover {
            background: var(--color-primary-hover);
        }

        .admin-toggle {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            background: var(--color-primary);
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(33, 128, 141, 0.3);
            transition: all 0.2s ease;
            z-index: 999;
        }

        .admin-toggle:hover {
            background: var(--color-primary-hover);
            transform: scale(1.1);
        }

        .no-results {
            padding: 40px 20px;
            text-align: center;
            color: var(--color-text-secondary);
        }

        @media (max-width: 768px) {
            .sidebar {
                width: 250px;
            }

            .doc-viewer {
                padding: 20px;
            }

            .admin-panel {
                width: calc(100vw - 40px);
                bottom: 60px;
            }
        }

        @media (max-width: 600px) {
            .container {
                flex-direction: column;
                height: auto;
            }

            .sidebar {
                width: 100%;
                max-height: 300px;
                border-right: none;
                border-bottom: 1px solid var(--color-border-light);
            }

            .doc-viewer {
                padding: 20px;
            }
        }


        /* ===== SCROLLBAR PERSONNALISÉE ===== */
/* ===== SCROLLBAR PERSONNALISÉE UNIQUEMENT POUR DOCCONTAINER ===== */
.doccontainer::-webkit-scrollbar {
    width: 18px;
}

.doccontainer::-webkit-scrollbar-track {
    background: var(--color-gray-200);
    border-radius: 4px;
}

.doccontainer::-webkit-scrollbar-thumb {
    background: #aadf4f; /* Vert Senari */
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
}

.doccontainer::-webkit-scrollbar-thumb:hover {
    background: #8ab83b; /* Vert plus foncé */
}

/* Sidebar et doc-viewer dans doccontainer (plus fines) */
.sidebar::-webkit-scrollbar,
.doc-viewer::-webkit-scrollbar {
    width: 28px;
}

.sidebar::-webkit-scrollbar-thumb,
.doc-viewer::-webkit-scrollbar-thumb {
    background: #aadf4f;
}

.sidebar::-webkit-scrollbar-thumb:hover,
.doc-viewer::-webkit-scrollbar-thumb:hover {
    background: #8ab83b;
}